<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8" />
	<title>Sample HTML5 Page for Printing</title>
	<style type="text/css" media="all">

body {
	font: 16px/1 Arial, Helvetica, sans-serif;
	margin: 1em;
}

article,
section {
	border: 0.25em solid black;
	display: block;
	margin: 0.5em;
	padding: 0.5em;
}

p {
	margin: 0;
}

time {
	font-weight: bold;
}

time,
mark {
	border: 2px solid blue;
	padding: 0.1em;
}

var {
	font-style: normal;
	font-weight: bold;
}

@media screen {
	section
	article#foo {
		margin-left: 100px;
	}
}

@media print {
	section
	article#bar {
		margin-left: 100px;
	}
}

	</style>

	<style type="text/css" media="screen">

.show_on_print {
	display: none;
}

	</style>

	<style type="text/css" media="print">

.show_on_screen {
	display: none;
}

.dashed_on_print {
	border-style: dashed;
}

	</style>

	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script>

/* Cross Browser Add Event Shortcut */
function addEvent(obj,type,fn){if(!obj)return;if(obj.attachEvent){obj['e'+type+fn]=fn;obj[type+fn]=function(){obj['e'+type+fn](window.event);};obj.attachEvent('on'+type,obj[type+fn]);}else obj.addEventListener(type,fn,false);};

/* Get Element By Id Shortcut */
function get(id) { return document.getElementById(id); };

/* On Window Load */
window.onload = function () {
	addEvent(
		get('hoverExample'),
		'mouseover',
		function () {
			this.style.background = '#AAA';
		}
	);
	addEvent(
		get('hoverExample'),
		'mouseout',
		function () {
			this.style.background = '#FFF';
		}
	);
};

	</script>
</head>
<body>

<h1>
	Print Me in IE!
</h1>

<article class="show_on_print">
	<p>
		This article is only visible on print.
	</p>
</article>

<article class="show_on_screen">
	<p>
		This article is only visible on screen.
	</p>
</article>

<article>
	<p>
		This article is always visible.
	</p>
</article>

<article class="dashed_on_print">
	<p>
		This article has a solid border on screen and a dashed border on print.
	</p>
</article>

<article id="hoverExample">
	<p>
		This article has a hover event.
	</p>
</article>

<section>
	<article id="foo">
		<p>
			This <var>article</var> is inside a <var>section</var>, uses <var>time</var> to display <time datetime="1776-07-04">July 4th, 1776</time>, and has an indent on screen, but not on print.
		</p>
	</article>

	<article>
		<p>
			This <var>article</var> is also inside a <var>section</var> and <mark>has marking</mark>.
		</p>

		<article id="bar">
			<p>
				This <var>article</var> is inside an <var>article</var> inside a <var>section</var> and has an indent on print, but not on screen.
			</p>
		</article>
	</article>
</section>
	
</body>
</html>